<template>
    <div id="app">
        账号 <input type="text" v-model="username">
        <br>
        密码 <input type="text" v-model="password">
        <br>
        <button @click="login">登录</button>
        <br>



        <el-input v-model='keyword'></el-input>
        <el-button @click="openDialog">新增</el-button>
        <DialogForm ref='dialog' @update="pageChange(pageIndex)"/>
        <el-table :data="tableData" style="width: 100%" v-loading="bool">
            <el-table-column label="id" prop="id" width="180"></el-table-column>
            <el-table-column label="标题" prop="title" width="150"></el-table-column>
            <el-table-column label="内容" prop="content" ></el-table-column>
            <el-table-column label="作者" prop="author" ></el-table-column>
            <el-table-column label="日期">
                <template slot-scope="scope">
                    {{scope.row.create_time | timeToDate}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.row)"
                        >编辑</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row.id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="pageIndex"
        :total="total"
        @current-change='pageChange'>
        </el-pagination>
    </div>
</template>

<script>
// 全局
// Vue.filter('timeTOData', (time)=>{
//     return new Date(time).toLocaleDateString()
// })
import DialogForm from './components/dialogForm.vue'
export default {
    components: {
        DialogForm,
    },
    // 过滤器
    filters: {
        timeToDate(time){ // 局部
            return new Date(time).toLocaleDateString()
        }
    },
    created() {
        // 首次默认加载
        this.pageChange()
    },
	data() {
      return {
        tableData: [],
        pageSize: 10,
        pageIndex:1,
        total:0,
        keyword: '',
        username: '',
        password: '',
        timer: null,
        ind:0,
        bool: false,
      }
    },
    watch: {
        keyword() {
            // 防抖
            clearTimeout(this.timer)
            this.timer = setTimeout(() => {
                this.ind=new Date().getTime() // 定义唯一值
                this.pageChange(1, this.ind)
            },800)
        }
    },
    methods: {
        openDialog() {
            this.$refs.dialog.dialogFormVisible = true;
            this.$refs.dialog.form = {title: "", content: "",author:""}
        },
        handleEdit(row) {
            this.$refs.dialog.form = JSON.parse(JSON.stringify(row)); 
            this.$refs.dialog.dialogFormVisible = true;
        },
    //   根据id删除列表
      handleDelete(id) {
        this.$api.delList(id).then(res=>{
            if(res.code===1){
                // 轻提示
                this.$message({
                    type:"success",
                    message:res.message
                })
                // 更新列表
                this.pageChange()
            }
        })
      },
    //   分页函数
      pageChange(e=1,ind = this.ind) {
          this.pageIndex=e;
          this.bool = true;
          this.$api
            .getList({
                pageIndex: this.pageIndex,
                pageSize: this.pageSize,
                keyword: this.keyword
            })
            .then((res) => {
                if(this.ind !== ind) return; // 如果不是最新则return
                if(res.code===1){
                    this.tableData = res.data.data
                    this.total = res.data.total
                }
                this.bool = false;
            })
      },
      login() {
          this.$api.login({
              username:this.username,
              password:this.password
          }).then(res=>{
              if(res.code===1){
                  console.log('登录成功')
                  window.localStorage.setItem('token', res.data.token) ;// 将token存储到 本地存储
              } else {
                  this.$message({
                      type:"error",
                      message:res.message
                  })
              }
          })
      }
    }
}
</script>

<style>
</style>